<template>
    <div class="write-blogArticle">
        <div class="form">
            <el-input v-model="form.title" placeholder="项目标题"></el-input>
            <el-button type="primary" @click="openDrawer">项目设置</el-button>
        </div>
        <MyEditor ref="editor"></MyEditor>
        <el-drawer :visible.sync="drawer" :with-header="false">
            <el-form ref="form" :model="form" label-width="100px" class="drawer-card">
                <el-form-item label="是否支持修改">
                    <el-radio-group v-model="form.isUpdate">
                        <el-radio v-for="item, index in commonYnStatus" :key="index" :label="item.dictValue">{{
                            item.dictLabel }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否支持部署">
                    <el-radio-group v-model="form.isDeploy">
                        <el-radio v-for="item, index in commonYnStatus" :key="index" :label="item.dictValue">{{
                            item.dictLabel }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否支持讲解">
                    <el-radio-group v-model="form.isTeach">
                        <el-radio v-for="item, index in commonYnStatus" :key="index" :label="item.dictValue">{{
                            item.dictLabel }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="源码价格">
                    <el-input v-model="form.price" placeholder="源码价格"></el-input>
                </el-form-item>
                <el-form-item label="在线地址">
                    <el-input v-model="form.projectUrl" placeholder="在线地址"></el-input>
                </el-form-item>
                <el-form-item label="介绍视频">
                    <el-input v-model="form.videoUrl" placeholder="介绍视频"></el-input>
                </el-form-item>
                <el-form-item label="项目封面">
                    <MyUpload ref="childUpload" @callParent="transDownloadUrl"></MyUpload>
                </el-form-item>
                <el-form-item>
                    <el-button size="medium" type="primary" @click="saveAsProject">发布项目</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>
</template>

<script>
import { addProject } from '@/api/blog/project';
import { listFrontData } from '@/api/system/dict/data';
import MyEditor from '../components/editor';
import MyUpload from '@/components/MyUpload';

export default {
    name: 'blog-project-admin-add',
    components: {
        MyEditor,
        MyUpload
    },
    data() {
        return {
            form: {},
            drawer: false,
            categoryList: [],
            tagList: [],
            isEdit: false,
            commonYnStatus: [],
            defaultIntroduce: "## 一、相关技术\n\n\n## 二、相关软件\n\n\n## 三、功能描述\n\n\n## 四、项目截图",
        }
    },
    mounted() {
        this.getCommonYnStatus();
        this.initProjectIntroduce();
    },
    methods: {
        initProjectIntroduce() {
            setTimeout(() => {
                this.$refs.editor.contentEditor.setValue(this.defaultIntroduce);
            }, 1000);
        },
        getCommonYnStatus() {
            listFrontData({
                dictType: "common_yn_status"
            }).then((res) => {
                this.commonYnStatus = res.rows;
            })
        },
        transDownloadUrl(url) {
            this.form.projectCover = url;
        },
        saveAsProject() {
            this.onSubmit();
        },
        onSubmit() {
            this.form.mdContent = this.$refs.editor.contentEditor.getValue();
            this.form.htmlContent = this.$refs.editor.contentEditor.getHTML();
            addProject(this.form).then((res) => {
                this.$message.success("发布成功");
            })
        },
        openDrawer() {
            this.drawer = true;
            if (this.isEdit && this.form.articleCover != null) {
                this.$nextTick(() => {
                    this.$refs.childUpload.setImgUrl(this.form.articleCover);
                });
            }
        }
    },
}
</script>

<style scoped>
.write-blogArticle {
    margin: 0 auto;
    padding: 20px;
}

.form {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form .el-input {
    font-size: 20px;
}

.drawer-card {
    padding: 20px;
}

::v-deep input[aria-hidden="true"] {
    display: none !important;
}

::v-deep .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
    box-shadow: none !important;
}
</style>
